<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="/WEB-INF/facelets/template.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core" >
    
    <ui:param name="paramTitle" value="View Cart" />
    <ui:param name="paramHeader" value="View Cart" />
    <ui:define name="content">
        <div id="viewCartOuterDiv">
            <h:form>
                <p:dataTable styleClass="viewCartTable" var="movie" value="#{ViewCartControllerBean.cartBean.movieList}">
                    <p:column>  
                        <f:facet name="header">  
                            <h:outputText value="Titel" />  
                        </f:facet>
                        <h:outputText value="#{movie.title}" />  
                    </p:column>  

                    <p:column style="width: 5.5em;">  
                        <f:facet name="header">  
                            <h:outputText value="Count" />  
                        </f:facet>  
                        <h:commandButton styleClass="countBtn" image="resources/img/minusBtn.png"
                                         action="#{ViewCartControllerBean.removeProduct(movie)}"/>
                        <h:outputText value="#{ViewCartBean.getCount(movie)}" />  
                        <h:commandButton styleClass="countBtn" image="resources/img/plusBtn.png" 
                                         action="#{ViewCartControllerBean.addProduct(movie)}"/>
                    </p:column>  

                    <p:column>  
                        <f:facet name="header">  
                            <h:outputText value="Price" />  
                        </f:facet>
                        <h:outputText value="#{movie.price}" />  
                    </p:column>
                    <p:column>  
                        <f:facet name="header">  
                            <h:outputText value="Total" />  
                        </f:facet>
                        <h:outputLabel value="#{ViewCartBean.getTotalCost(movie)}" />  
                    </p:column>
                </p:dataTable>
                <div class="viewProductBtnDiv">
                    <h:commandButton styleClass="viewCartBtn" id="emptyCartBtn" value="Empty Cart" action="#{ViewCartControllerBean.emptyCart}"/>
                    <h:commandButton styleClass="viewCartBtn" id="payBtn" value="Pay" action="#{ViewCartControllerBean.navigateToPay}"/>
                </div>
            </h:form>
        </div>
    </ui:define>
</ui:composition>